editor.md显示编辑框及图片上传心得（非常详细） |
您所在的位置：网站首页 › editormd 输入出现多个空行问题 › editor.md显示编辑框及图片上传心得（非常详细） |
editor.md显示编辑框及图片上传心得（非常详细）
一、.md在网页上显示编辑器
先去官网下载editor.md的资源文件：eidtor.md官网将下载好的editormd文件夹重命名为editormd，并放在网站的根目录下面，然后新建markdown.html文件，用作显示。  在markdown.html中输入以下内容用做显示编辑器，注意资源引用的路径哦，参考我的项目结构中引用的具体资源，再根据你项目结构，自行调整
Full example - Editor.md examples
### Hello Editor.md !
$(function() {
var editor = editormd("editor", {
width: "90%",
height: 800,
path : '../editormd/lib/',
theme : "light",
previewTheme : "light",
editorTheme : "pastel-on-light",
// markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "http://xx.xx.xx.xx:8080/API/wiki/beauty/uploadFile",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
这样就可以在页面中显示出编辑框啦
二、图片上传
图片上传里面很多坑，用官方的方法，试了很多次，都失败了，图片回显url为空，提示SecurityError: Blocked a frame with origin "http://localhost:63343" from acc...之类的错误，以为是跨域上传图片的问题，后来发现还是不行，最后请教了别人，别用官方的方法了，自己写上传函数，终于把这个东西给解决了，亲测可用！亲测可用！亲测可用！ 我们只修改了一个文件，就是editormd/plugins/image-dialog/image-dialog.js这个文件（具体在哪，参考我的项目结构）。我将修改完后的文件代码贴在下面，大家直接复制黏贴覆盖就好啦，核心点就是我们采用ajax方法直接上传，然后获取返回值，进行赋值。后端采用的是spring boot，有疑问的话评论区回复文末有福利哦 /*! * Image (upload) dialog plugin for Editor.md * * @file image-dialog.js * @author pandao * @version 1.3.4 * @updateTime 2015-06-09 * {@link https://github.com/pandao/editor.md} * @license MIT */ (function() { var factory = function (exports) { var pluginName = "image-dialog"; exports.fn.imageDialog = function() { var _this = this; var cm = this.cm; var lang = this.lang; var editor = this.editor; var settings = this.settings; var cursor = cm.getCursor(); var selection = cm.getSelection(); var imageLang = lang.dialog.image; var classPrefix = this.classPrefix; var iframeName = classPrefix + "image-iframe"; var dialogName = classPrefix + pluginName, dialog; cm.focus(); var loading = function(show) { var _loading = dialog.find("." + classPrefix + "dialog-mask"); _loading[(show) ? "show" : "hide"](); }; if (editor.find("." + dialogName).length action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid; } //注释的是官方的写法 // var dialogContent = ( (settings.imageUpload) ? "" : "" ) + // ( (settings.imageUpload) ? "" : "" ) + // "" + imageLang.url + "" + // "" + (function(){ // return (settings.imageUpload) ? "" + // "" + // "" + // "" : ""; // })() + // "" + // "" + imageLang.alt + "" + // "" + // "" + // "" + imageLang.link + "" + // "" + // "" + // ( (settings.imageUpload) ? "" : ""); //这是我个人写法 var dialogContent = ( (settings.imageUpload) ? "" : "" ) + ( (settings.imageUpload) ? "" : "" ) + "" + imageLang.url + "" + "" + (function(){ return (settings.imageUpload) ? "" + "" + "" + "" : ""; })() + "" + "" + imageLang.alt + "" + "" + "" + "" + imageLang.link + "" + "" + "" + ( (settings.imageUpload) ? "" : ""); //这是官方的，不知道为什么，官方把它给注释掉了 //var imageFooterHTML = "" + imageLang.managerButton + ""; dialog = this.createDialog({ title : imageLang.title, width : (settings.imageUpload) ? 465 : 380, height : 254, name : dialogName, content : dialogContent, mask : settings.dialogShowMask, drag : settings.dialogDraggable, lockScreen : settings.dialogLockScreen, maskStyle : { opacity : settings.dialogMaskOpacity, backgroundColor : settings.dialogMaskBgColor }, buttons : { enter : [lang.buttons.enter, function() { var url = this.find("[data-url]").val(); var alt = this.find("[data-alt]").val(); var link = this.find("[data-link]").val(); if (url === "") { alert(imageLang.imageURLEmpty); return false; } var altAttr = (alt !== "") ? " \"" + alt + "\"" : ""; if (link === "" || link === "http://") { cm.replaceSelection("![" + alt + "](" + url + altAttr + ")"); } else { cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")"); } if (alt === "") { cm.setCursor(cursor.line, cursor.ch + 2); } this.hide().lockScreen(false).hideMask(); //删除对话框 this.remove(); return false; }], cancel : [lang.buttons.cancel, function() { this.hide().lockScreen(false).hideMask(); //删除对话框 this.remove(); return false; }] } }); dialog.attr("id", classPrefix + "image-dialog-" + guid); if (!settings.imageUpload) { return ; } var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]"); fileInput.bind("change", function() { var fileName = fileInput.val(); var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/ if (fileName === "") { alert(imageLang.uploadFileEmpty); return false; } if (!isImage.test(fileName)) { alert(imageLang.formatNotAllowed + settings.imageFormats.join(", ")); return false; } loading(true); var submitHandler = function() { var uploadIframe = document.getElementById(iframeName); uploadIframe.onload = function() { loading(false); //注释的是官方写法 // var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body; // var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null); // // json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")"); // // if(!settings.crossDomainUpload) // { // if (json.success === 1) // { // dialog.find("[data-url]").val(json.url); // } // else // { // alert(json.message); // } // } // // return false; //这是我个人写法 var formData = new FormData(); formData.append("editormd-image-file",$("#editormd-image-file")[0].files[0]); var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid; $.ajax({ type:"post", url:action, data:formData, dataType:"json", async:false, processData : false, // 使数据不做处理 contentType : false, // 不要设置Content-Type请求头 success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果 console.log(data); if(data.success == 1){ console.log(data.message); dialog.find("[data-url]").val(data.url); }else{ alert(data.message); } }, }); return false; }; }; dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click"); }); } dialog = editor.find("." + dialogName); dialog.find("[type=\"text\"]").val(""); dialog.find("[type=\"file\"]").val(""); dialog.find("[data-link]").val("http://"); this.dialogShowMask(dialog); this.dialogLockScreen(); dialog.show(); }; }; // CommonJS/Node.js if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { module.exports = factory; } else if (typeof define === "function") // AMD/CMD/Sea.js { if (define.amd) { // for Require.js define(["editormd"], function(editormd) { factory(editormd); }); } else { // for Sea.js define(function(require) { var editormd = require("./../../editormd"); factory(editormd); }); } } else { factory(window.editormd); } })(); 三、福利！整个项目下载链接：点击下载 |
【本文地址】